<template>
  <div class="activityReleased">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="已发布活动" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="日常活动" name="everyday">
          <el-table
              :data="everydayTable"
              style="width: 100%"
              stripe
              highlight-current-row
          >
            <el-table-column
                label="序号"
                type="index"
                width="100px"
                :index="everydayIndexMethod">
            </el-table-column>
            <el-table-column
                prop="activityTitle"
                label="活动标题"
                width="300px">
            </el-table-column>
            <el-table-column
                prop="activityPlace"
                label="活动地点"
                width="300px">
            </el-table-column>
            <el-table-column
                prop="activityReleasetime"
                label="发布时间"
                width="200px"
                sortable>
              <template slot-scope="scope">
                {{shortTime(scope.row.activityReleasetime)}}
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="报名">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toApplyDetail(scope.row.activityId)" >详情</el-button>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toActivityDetail(scope.row.activityId)">编辑</el-button>
              </template>
            </el-table-column>

          </el-table>

          <div style="padding: 10px 0">
            <el-pagination
                :page-sizes="[2, 5, 10, 20]"
                :page-size=this.everydayPageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.everydayTotal
                :current-page=this.everydayPageNum
                @size-change="everydaySizeChange"
                @current-change="everydayCurrentChange"
            >
            </el-pagination>
          </div>

        </el-tab-pane>
        <el-tab-pane label="志愿者活动" name="volunteer">
          <el-table
              :data="volunteerTable"
              style="width: 100%"
              highlight-current-row
              @row-click="toActivityDetail"

          >
            <el-table-column
                label="序号"
                type="index"
                width="100px"
                :index="volunteerIndexMethod">
            </el-table-column>
            <el-table-column
                prop="activityTitle"
                label="活动标题"
                width="300px">
            </el-table-column>
            <el-table-column
                prop="activityPlace"
                label="活动地点"
                width="300px">
            </el-table-column>
            <el-table-column
                prop="activityReleasetime"
                label="发布时间"
                width="200px"
                sortable>
              <template slot-scope="scope">
                {{shortTime(scope.row.activityReleasetime)}}
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="报名">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toApplyDetail(scope.row.activityId)" >详情</el-button>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="padding: 10px 0">
            <el-pagination
                :page-sizes="[2, 5, 10, 20]"
                :page-size=this.volunteerPageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.volunteerTotal
                :current-page=this.volunteerPageNum
                @size-change="volunteerSizeChange"
                @current-change="volunteerCurrentChange"
            >
            </el-pagination>
          </div>

        </el-tab-pane>
      </el-tabs>


    </el-card>
  </div>
</template>

<script>
import {getEverydayActivityByPage, getVolunteerActivityByPage} from "@/api/allApi";
import {shortTime} from "../../../../utils/timeFormat";

export default {
  name: "ActivityReleased",
  data() {
    return{
      everydayTable:[],
      volunteerTable:[],
      everydayPageSize:5,
      volunteerPageSize:5,
      everydayTotal:0,
      volunteerTotal:0,
      everydayPageNum:1,
      volunteerPageNum:1,
      activeName: 'everyday'
    }
  },
  methods:{
    shortTime,
    //获取序号
    everydayIndexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.everydayPageNum // 当前页码
      const pagesize = this.everydayPageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    volunteerIndexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.volunteerPageNum // 当前页码
      const pagesize = this.volunteerPageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    goBack() {
      this.$router.back();
    },
    getEverydayActivityByPage() {
      getEverydayActivityByPage({
        current:this.everydayPageNum,
        pageSize:this.everydayPageSize
      }).then(res=>{
        this.everydayTable = res.data.data
        this.everydayTotal = res.data.total
      })
    },
    getVolunteerActivityByPage() {
      getVolunteerActivityByPage({
        current:this.volunteerPageNum,
        pageSize:this.volunteerPageSize
      }).then(res=>{
        this.volunteerTable = res.data.data
        this.volunteerTotal = res.data.total
      })
    },
    everydaySizeChange(pageSize){
      this.everydayPageSize=pageSize;
      this.getEverydayActivityByPage();
    },
    everydayCurrentChange(pageNum){
      this.everydayPageNum=pageNum;
      this.getEverydayActivityByPage();
    },
    volunteerSizeChange(pageSize){
      this.volunteerPageSize=pageSize;
      this.getVolunteerActivityByPage();
    },
    volunteerCurrentChange(pageNum){
      this.volunteerPageNum=pageNum;
      this.getVolunteerActivityByPage();
    },
    toActivityDetail(activityId) {
      this.$router.push({
        path: "/adminLayout/adminBackground/activityDetail/"+activityId,
        params: {
          activityId: activityId
        },
      });
    },
    toApplyDetail(activityId){
      this.$router.push({
        path: "/adminLayout/adminBackground/applyDetail/"+activityId,
        params: {
          activityId: activityId
        },
      });
    }
  },
  mounted() {
    this.getEverydayActivityByPage()
    this.getVolunteerActivityByPage()
  }
}
</script>

<style scoped>

</style>